<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

const emits = defineEmits(['onReady'])

let viewer = null;

//默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    107.58877590593353, // 西经
    22.37920009304257, // 南纬
    108.93621752454101, // 东经
    23.253321909812872 // 北纬
);



onMounted(() => {
    viewer = new Cesium.Viewer("cesiumContainer", {
        // Start in Columbus Viewer
        sceneMode: Cesium.SceneMode.MORPHING,
        // Use Cesium World Terrain
        terrain: Cesium.Terrain.fromWorldTerrain(),
        // Hide the base layer picker
        baseLayerPicker: false,
        // Show Columbus View map with Web Mercator projection
        mapProjection: new Cesium.WebMercatorProjection(),
        timeline: false,
        fullscreenButton: false,
        infoBox: false,
        homeButton: false,
        geocoder: false,
        navigationHelpButton: false,
        // baseLayer: false,
        projectionPicker: false,
        scene3DOnly: true,
        sceneModePicker: false,
        animation: false,
    });

    console.log(viewer)
    viewer.creditDisplay.container.style.display = 'none';
    viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
    viewer.extend(Cesium.viewerCesiumInspectorMixin);

    // 相机视角定位到南宁
    viewer.camera.position = new Cesium.Cartesian3(-1865244.2661995632, 5662326.572339147, 2496567.3543951656);

    emits('onReady', viewer);

})



</script>

<template>
    <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
